
<style>
::-webkit-scrollbar {
	width: 0px
}

.leftmessage {
	float: left;
	width: 100%;
	margin-bottom: 5px;
}

.leftmessage .content_wrap {
	float: left;
}

.rightmessage {
	float: right;
	width: 100%;
	margin-top: 5px;
}

.rightmessage .content_wrap {
	float: right;
}
</style>
<div>
	<ul  id="users" class="list-group" style="float: left;">
			<li  class="list-group-item list-group-item-success " attall="1"  style="cursor: pointer;"  >全部</li>
		[#list admins as admin]
			<li class="list-group-item list-group-item-success " style="cursor: pointer;" attall="0"   attid="${admin.id}"   >${admin.name}</li>
		[/#list]
	</ul>



	<div class="panel panel-success " style="float: left; margin-left: 10px; width: 300px;">


		<div id="websorket_tips" class="panel-heading" style="float: left; width: 100%; height: 178px; overflow: auto;">
			<div id="leftmodel" class="leftmessage">
				<div class="content_wrap">
					<div class="_name" style="font-size: 8px;"></div>
					<div class="_content btn btn-info " ></div>
				</div>
			</div>
	
			<div id="rightmodel" class="rightmessage">
				<div class="content_wrap">
					<div class="_name" style="font-size: 5px;float: right;"></div><div></div>
					<div class="_content btn btn-success" style="float: right;" ></div>
				</div>
			</div>
			
			<div id="leftmodel" class="leftmessage">
				<div class="content_wrap">
					<div class="_name" style="font-size: 8px;"></div>
					<div class="_content btn btn-info " ></div>
				</div>
			</div>
	
			<div id="rightmodel" class="rightmessage">
				<div class="content_wrap">
					<div class="_name" style="font-size: 5px;float: right;"></div><div></div>
					<div class="_content btn btn-success" style="float: right;" ></div>
				</div>
			</div>
			
		</div>

		<div class="panel-success panel-body " style="float:">
			<div class="input-group">
				<input type="text" class="form-control" placeholder="输入要发送的内容" id="messageval"> <span class="input-group-btn">
					<button class="btn btn-primary" type="button" onclick="send()">send</button>
				</span>
			</div>
		</div>
	</div>
</div>
<div style="float: none;"></div>

<div style="color: red;float: left;">
	*默认所有人可以接受到信息. 选择左侧用户进行发送,会收到弹窗提示.
</div>


	<script>
		function appendMy(message,name) {
			//添加
			var my = $("#rightmodel").clone();
			my.find("._name").html(name).parent().find("._content").html(message);
			
			$("#websorket_tips").append(my).scrollTop($("#websorket_tips")[0].scrollHeight);
			
		}

		function appendOther(message,name) {
			//添加
			var my = $("#leftmodel").clone();
			
			my.find("._name").html(name).parent().find("._content").html(message);
			
			//滚动到底部
			$("#websorket_tips").append(my).scrollTop($("#websorket_tips")[0].scrollHeight);
		}

		
		function send() {
			
			var admins =[];
			$("#users li").each(function(){
				if($(this).hasClass("active")&&$(this).attr("attall")==0){
					admins.push($(this).attr("attid"));
				}
			})
			
			var adminids = admins.join(",");
			
			var tosendmsg = $("#messageval").val();
			appendMy(tosendmsg,"${admin.name}");

			$.ajax({
				type:"post",
				dataType:"json",
				url : "/frame/sendmsg.do",
				data : {
					adminid : adminids,
					message : tosendmsg
				},
				success : function(data) {
					$("#messageval").val("");
				}
			});
		}
		
		$("#users li").on("click",function(){
			
			if($(this).attr("attall")==1){
				if($(this).hasClass("active")){
					$(this).siblings().removeClass("active");
				}else{
					$(this).siblings().addClass("active");
				}
			}
			
			if($(this).hasClass("active")){
				$(this).removeClass("active");
				$(this).parent().find("li").eq(0).removeClass("active");
			}else{
				$(this).addClass("active");
			}
		})
	</script>